<template>
		<view class="body">
			<view class="lucky">
				<image class="lucky_font" src="../../static/lucky.png"></image>
			</view>
				<view class="probability">
					<view class="probability_font">
						<view class="winning">中奖概率高达70%</view>
					</view>
				</view>
			<view class="content">
				<wheelDraw :winIndex="winIndex" @routingBefore="routingBefore" @routingFinish="routingFinish"  ref='wheelDraw' :init="true" :prizeList="turnTableList" :wh="220" :lightSpeed="340"></wheelDraw>
			</view>
			<view class="end">
				<view class="endTime">活动结束时间:<text style="margin-left:20upx;">{{endtime}}</text></view>
			</view>
			<!-- 活动奖品 -->
			<view class="prize">
				<view class="event_prize">活动奖品</view>
				<view class="p_prize">
					<view class="prize_award" v-for="list in lists">
						<text class="first_prize">{{list.award}}:</text><text class="amount">{{list.volume}}。</text><text class="quantity">{{list.num}}</text>
					</view>		
				</view>
			</view>
			<!-- 掌邦技术支持 -->
			<view class="support">
				<image class="zanboon" src="../../static/zanboon-width.png"></image>
			</view>
		</view>
</template>
<script>
	import wheelDraw from '@/components/wheelDraw/wheelDraw.vue'
	export default {
		components: {
			wheelDraw
		},
		data() {
			return {
				winIndex:0,
				turnTableList:[
					"一等奖",
					"谢谢参与",
					"二等奖",
					"谢谢参与",
					"三等奖",
					"谢谢参与",
				],
				endtime:'2019-10-18 12:00',
				lists:[
					{
						award: '一等奖',
						volume: '购物车券4000元3张',
						num:'还剩余10张'
					},
					{
						award: '二等奖',
						volume: '购物车券3000元5张',
						num:'还剩余10张'
					},
					{
						award: '三等奖',
						volume:'购物车券2000元10张',
						num:'还剩余10张'
					}
				],
			}
		},
		onLoad() {
			//初始化方法
			//this.$refs.wheelDraw.drawInit()
		},
		// onShow() {
		// 	let that = this;
		// 	uni.request({
		// 		url:'http://hmc.zanboon.com/hmc/mobile_terminal/big_turntable',
		// 		data:{
		// 			token:'YQyoINZJPeMRdkbKxh1m',
		// 			activity_id:'1'
		// 		},
		// 		success(res) {
		// 			that.turnTableList.splice(0)
		// 			console.log(res,'res');
		// 			// console.log(res.data.result.turntablelist,'res1111');
		// 			that.turnTableList = res.data.result.turntablelist;
		// 			console.log(that.turnTableList,'11111');
		// 		},
		// 		fail() {
		// 			
		// 		}
		// 	})
		// },
		methods: {
			routingBefore(){
				console.log('抽奖开始！')
				this.$refs.wheelDraw.routing() //开始转动
			},
			routingFinish(){
				let no=this.turnTableList[this.winIndex];
				if(no=='谢谢参与'){
					uni.showModal({
						confirmColor:'#D53D34',
						cancelColor: '#333333',
						content: '很遗憾您未中奖，再接再厉',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else{
					uni.showModal({
						title: '中奖提示',
						content: '恭喜你获得'+this.turnTableList[this.winIndex]+'油卡100元优惠券',
						confirmColor:'#D53D34',
						cancelColor: '#333333',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}	
			},
		}
	}
</script>

<style>
	page{
		background-image: url(../../static/zhuanpan.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 1448upx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 1448upx;
	}
	
	.turntable{
	}
	.lucky{
		display: flex;
		align-items: center;
		justify-content: center;
	}
		.lucky_font{
			margin-top: 44upx;
			height: 122upx;
			width: 548upx;
		}
	.probability{
		margin-top: 44upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
		.probability_font{
			
			border-radius:28upx;
			height: 56upx;
			width:446upx;
			background-image: linear-gradient(#FFFCF2 , #FFC3C7);
		}
			.winning{
				margin-top: 6upx;
				text-align: center;
				color:#E74846;
				font-size: 32upx;
			}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 68upx;
	}
	.end{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 48upx;
	}
	.endTime{
		color: #FFFFFF;
		font-size: 30upx;
	}
	.prize{
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-top: 40upx;
	}
		.event_prize{
			margin-left: 30upx;
			font-size: 30upx;
			color: #FFFFFF;
			font-weight: bold;
		}
		.p_prize{
			background:rgba(0,0,0,0.1);
			border-radius: 10upx;
			margin:8upx 30upx 0upx 30upx ;
		}
			.prize_award{
				color: #FFFFFF;
				font-size: 28upx;
				margin: 20upx 0upx;
			}
				.first_prize{
					margin-left: 16upx;
				}
				.amount{
					margin-left: 20upx;
				}
				.quantity{
					color: #E04152;
					padding: 0upx 20upx;
					border-radius: 4upx;
					background-color: #FFFFFF;
				}
	.support{
		display: flex;
		justify-content: center;
		margin-top: 108upx;
		margin-bottom:96upx;
	}
		.zanboon{
			height: 28upx;
			width: 216upx;
		}
	.logo {
		height: 200upx;
		width: 200upx;
		margin-top: 200upx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50upx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36upx;
		color: red;
	}
</style>
